<template>
  <el-row class="tac" style="height: auto">
    <el-col>
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        :collapse-transition="False"
      >
        <h3
          id="title"
          style="
            font-size: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <el-image
            :src="logo"
            fit
            style="width: 50px; height: 50px"
          ></el-image>
          {{ isCollapse ? "" : "智能投" }}
        </h3>

        <el-menu-item
          index="1"
          @click="clickmenu(main)"
          style="height: 100px; line-height: 100px"
        >
          <i id="icon" :class="main.icon" style="font-size: 25px"></i>
          <span id="title" slot="title" style="font-size: 25px">{{
            main.name
          }}</span>
        </el-menu-item>

        <el-menu-item-group title="我的">
          <el-menu-item
            :index="index + 2"
            @click="clickmenu(item)"
            v-for="(item, index) in list1"
            :key="index"
            style="height: 100px; line-height: 100px"
          >
            <i :class="item.icon" style="font-size: 25px"></i>
            <span slot="title" style="font-size: 25px">{{ item.name }}</span>
          </el-menu-item>
        </el-menu-item-group>

        <el-menu-item-group title="使用">
          <el-menu-item
            :index="index + 4"
            @click="clickmenu(item)"
            v-for="(item, index) in list2"
            :key="index"
            style="height: 100px; line-height: 100px"
          >
            <i :class="item.icon" style="font-size: 25px"></i>
            <span slot="title" style="font-size: 25px">{{ item.name }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import img from "../assets/tubiao.png";
export default {
  props: {
    isCollapse: {
      type: Boolean,
      default: false,
    },
    user_id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      logo: img,
      main: { name: "首页", url: "main", icon: "el-icon-s-home" },
      list1: [
        { name: "我的钱包", url: "mywallet", icon: "el-icon-bank-card" },
        { name: "交易记录", url: "record", icon: "el-icon-time" },
      ],
      list2: [
        { name: "基金选购", url: "purchase", icon: "el-icon-goods" },
        { name: "资产配置", url: "asset", icon: "el-icon-set-up" },
        { name: "收益明细", url: "detail", icon: "el-icon-s-marketing" },
      ],
      False: false,
    };
  },
  methods: {
    clickmenu(item) {
      this.$router.push({
        path: item.url,
        query: { user_id: this.user_id },
      });
      this.$emit("posttitle", item.name);
    },
  },
};
</script>

<style>
.el-menu-item-group {
  text-align: left;
}
.el-menu-item {
  text-align: center;
}
.deep#icon {
  font-size: 25px;
}
.deep#title {
  font-size: 25px;
}
.horizontal-collapse-transition {
  transition: 0s width ease-in-out, 0s padding-left ease-in-out,
    0s padding-right ease-in-out;
}
</style>
